<template>
    <div class="main tag-goods-list">
        <section>
            <div class="filter-container">
                <el-input @keyup.enter.native="search" class="filter-item" placeholder="按商品名称搜索" v-model="listQuery.goodsName"></el-input>
                <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </div>
            <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" label="商品名称" prop="goodsName" min-width="300" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" label="标签" min-width="100" show-overflow-tooltip>
                    <template>{{name}}</template>
                </el-table-column>
                <el-table-column align="center" label="排序" prop="sort" min-width="100" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" label="操作" >
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="showEdit(scope.row)" plain>编辑</el-button>
                        <el-button type="primary" size="mini" @click="deleteGoods(scope.row.id)" plain>移除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.pageIndex"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.pageSize"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
            <el-dialog title="编辑" :visible.sync="showEditPop">
                <el-form :model="formData" size="medium" ref="form" label-width="120px">
                    <el-form-item label="商品名称:" prop="title">
                        {{formData.goodsName}}
                    </el-form-item>
                    <el-form-item label="排序:" prop="sort" :rules="commonRules.sortRule">
                        <el-input type="number" v-model.number="formData.sort" placeholder="排序" maxlength="10"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="save" :disabled="btnDisabled">保存</el-button>
                    <el-button @click="showEditPop = false">取消</el-button>
                </div>
            </el-dialog>
        </section>
    </div>
</template>
<script>
    export default {
        name: 'tagGoods',
        props: {
            id: {
                default: ''
            },
            name: {
                default: ''
            }
        },
        data() {
            return {
                listLoading: false,
                listQuery: {
                    tagId: this.id,
                    pageIndex: 1,
                    pageSize: 10,
                    isPage: 1,
                    goodsName:''
                },
                list: [],
                listTotal: 0,
                formData: {
                    id: '',
                    goodsName: '',
                    sort: ''
                },
                showEditPop: false,
                btnDisabled: false
            }
        },
        created() {
            this.getList();
        },
        methods: {
            search() {
                this.listQuery.pageIndex = 1
                this.getList()
            },
            // 获取列表
            getList() {
                this.listLoading = true;
                this.request({
                    url: '/bsnl-product/goods/tag/query',
                    method: 'post',
                    data: this.listQuery
                }).then(({data, totalCount}) => {
                    this.list = data;
                    this.listTotal = totalCount;
                    this.listLoading = false;
                }).catch(err => {
                    console.log(err);
                    this.list = [];
                    this.listTotal = 0;
                    this.listLoading = false;
                });
            },
            handleSizeChange (value) {
                this.listQuery.pageSize = value
                this.getList()
            },
            handleCurrentChange(val){
                this.listQuery.pageIndex = val;
                this.getList();
            },
            deleteGoods(id) {
                 this.$confirm('移除操作，是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                     this.request({
                        url: '/bsnl-product/goods/tag/deleteGoodsTagByGoodsTagId?goodsTagId='+id,
                        method: 'delete'
                    }).then(() => {
                        this.$message.success('移除成功');
                        this.getList()
                    }).catch(err => {
                        console.log(err)
                    })
                }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消操作'
                    })
                })
               
            },
            // 编辑
            showEdit(row) {
                this.formData = Object.assign({}, row);
                this.$nextTick(()=>{
                    this.$refs.form.clearValidate()
                });
                this.showEditPop = true;
                this.btnDisabled = false;
            },
            // 保存
            save() {
                this.$refs.form.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    this.btnDisabled = true;
                    this.request({
                        url: '/bsnl-product/goods/tag/update',
                        method: 'post',
                        data: this.formData
                    }).then(() => {
                        this.btnDisabled = false;
                        this.showEditPop = false;
                        this.$message.success('保存成功');
                        this.getList();
                    }).catch(err => {
                        this.btnDisabled = false;
                    });

                    /*if(this.formData.role===''&&this.formData.userId===''){
                        this.$message({
                            type: 'warning',
                            message: '用户角色或者用户Id请填写一个'
                        })
                        return false;
                    }
                    let url = this.formData.id ? '/bsnl-activity/message/update' : '/bsnl-activity/message/create'
                    this.btnDisabled = true;
                    this.request({
                        url,
                        method: 'post',
                        data: this.formData
                    }).then(() => {
                        this.btnDisabled = false;
                        this.showEditPop = false;
                        this.$message.success('保存成功');
                        this.getList();
                    }).catch(err => {
                        this.btnDisabled = false;
                    });*/
                });
            }
        }
    }
</script>
